<template>
  <view class="distribution-container">

    <!-- 滚动内容区域 -->
    <scroll-view class="scroll-content" scroll-y>
      <!-- 收益概览区域 -->
      <view class="earnings-overview">
        <view class="earnings-header">
          <view class="earnings-main">
            <text class="earnings-label">可提现收益</text>
            <text class="earnings-amount">¥{{ earningsInfo.withdrawableAmount }}</text>
            <text class="earnings-note">累计收益 ¥{{ earningsInfo.totalEarnings }}</text>
          </view>
          <view class="earnings-actions">
            <view class="action-btn withdraw-btn" @click="withdrawMoney">
              <text class="btn-text">提现</text>
            </view>
          </view>
        </view>

        <!-- 收益统计 -->
        <view class="earnings-stats">
          <view class="stat-item">
            <text class="stat-value">¥{{ earningsInfo.todayEarnings }}</text>
            <text class="stat-label">今日收益</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-value">¥{{ earningsInfo.monthEarnings }}</text>
            <text class="stat-label">本月收益</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-value">{{ earningsInfo.customerCount }}</text>
            <text class="stat-label">推广客户</text>
          </view>
        </view>
      </view>

      <!-- 银行卡管理区域 -->
      <view class="bank-card-section">
        <view class="section-header">
          <text class="section-title">银行卡管理</text>
          <view class="section-action" @click="manageBankCard">
            <text class="action-text">{{ hasBankCard ? '管理' : '绑定' }}</text>
            <u-icon name="arrow-right" size="24" color="#909399"></u-icon>
          </view>
        </view>

        <!-- 已绑定银行卡 -->
        <view class="bank-card" v-if="hasBankCard">
          <view class="card-info">
            <image class="bank-logo" :src="bankCardInfo.bankLogo" mode="aspectFit"></image>
            <view class="card-details">
              <text class="bank-name">{{ bankCardInfo.bankName }}</text>
              <text class="card-number">**** **** **** {{
                  bankCardInfo.cardNumber.slice(-4)
                }}
              </text>
            </view>
          </view>
          <view class="card-status">
            <text class="status-text">已绑定</text>
          </view>
        </view>

        <!-- 未绑定银行卡 -->
        <view class="no-bank-card" v-else>
          <view class="no-card-icon">
            <image mode="aspectFill"
                   src="https://file.casugn.com/storecompcard/temp/yhk_1757656786574.png"></image>
          </view>
          <text class="no-card-text">请先绑定银行卡</text>
          <text class="no-card-desc">绑定后可进行提现操作</text>
        </view>
      </view>

      <!-- 功能菜单区域 -->
      <view class="menu-section">
        <view class="menu-list">
          <view class="menu-item" @click="goToPage('/pagesMall/distribution/withdrawRecord')">
            <view class="menu-left">
              <view class="menu-icon withdraw-icon">
                <u-icon name="red-packet" size="40" color="#10c469"></u-icon>
              </view>
              <text class="menu-title">提现记录</text>
            </view>
            <view class="menu-right">
              <text class="menu-count" v-if="withdrawRecordCount > 0">{{
                  withdrawRecordCount
                }}
              </text>
              <u-icon name="arrow-right" size="28" color="#c0c4cc"></u-icon>
            </view>
          </view>

          <view class="menu-item" @click="goToPage('/pagesMall/distribution/earningsDetail')">
            <view class="menu-left">
              <view class="menu-icon earnings-icon">
                <u-icon name="order" size="40" color="#4182bb"></u-icon>
              </view>
              <text class="menu-title">收益明细</text>
            </view>
            <view class="menu-right">
              <u-icon name="arrow-right" size="28" color="#c0c4cc"></u-icon>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部安全区域 -->
      <view class="safe-area-bottom"></view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      hasBankCard: true, // 是否已绑定银行卡
      withdrawRecordCount: 15, // 提现记录数量
      earningsInfo: {
        withdrawableAmount: '2,368.50', // 可提现金额
        totalEarnings: '8,956.80', // 累计收益
        todayEarnings: '186.50', // 今日收益
        monthEarnings: '2,568.80', // 本月收益
        customerCount: 68 // 推广客户数
      },
      bankCardInfo: {
        bankName: '中国建设银行',
        bankLogo: 'https://file.casugn.com/storecompcard/temp/yhk_1757656786574.png',
        cardNumber: '6217001234567890123'
      }
    }
  },

  onLoad() {
    this.getSystemInfo()
    this.loadDistributionData()
  },

  methods: {
    // 获取系统信息
    getSystemInfo() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 0
    },

    // 加载分销数据
    loadDistributionData() {
      // 这里可以调用API获取分销相关数据
      console.log('加载分销数据')
    },

    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 提现操作
    withdrawMoney() {
      if (!this.hasBankCard) {
        uni.showModal({
          title: '提示',
          content: '请先绑定银行卡',
          showCancel: false,
          confirmText: '去绑定',
          success: (res) => {
            if (res.confirm) {
              this.manageBankCard()
            }
          }
        })
        return
      }

      // 检查可提现金额
      const withdrawableAmount = parseFloat(this.earningsInfo.withdrawableAmount.replace(/,/g, ''))
      if (withdrawableAmount < 100) {
        uni.showToast({
          title: '最低提现金额为100元',
          icon: 'none'
        })
        return
      }

      uni.showModal({
        title: '提现确认',
        content: `确定要提现 ¥${this.earningsInfo.withdrawableAmount} 吗？`,
        success: (res) => {
          if (res.confirm) {
            this.processWithdraw()
          }
        }
      })
    },

    // 处理提现
    processWithdraw() {
      uni.showLoading({title: '处理中...'})
      // 模拟提现处理
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '提现申请已提交',
          icon: 'success'
        })
        // 刷新数据
        this.loadDistributionData()
      }, 2000)
    },

    // 银行卡管理
    manageBankCard() {
      console.log('银行卡管理')
      uni.showActionSheet({
        itemList: this.hasBankCard ? ['查看银行卡', '更换银行卡', '解绑银行卡'] : ['绑定银行卡'],
        success: (res) => {
          if (this.hasBankCard) {
            switch (res.tapIndex) {
              case 0:
                this.viewBankCard()
                break
              case 1:
                this.changeBankCard()
                break
              case 2:
                this.unbindBankCard()
                break
            }
          } else {
            if (res.tapIndex === 0) {
              this.bindBankCard()
            }
          }
        }
      })
    },

    // 查看银行卡
    viewBankCard() {
      uni.showModal({
        title: '银行卡信息',
        content: `${this.bankCardInfo.bankName}\n卡号：${this.bankCardInfo.cardNumber}`,
        showCancel: false
      })
    },

    // 绑定银行卡
    bindBankCard() {
      console.log('绑定银行卡')
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    },

    // 更换银行卡
    changeBankCard() {
      console.log('更换银行卡')
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    },

    // 解绑银行卡
    unbindBankCard() {
      uni.showModal({
        title: '确认解绑',
        content: '解绑后将无法进行提现操作，确定要解绑银行卡吗？',
        success: (res) => {
          if (res.confirm) {
            this.hasBankCard = false
            uni.showToast({
              title: '解绑成功',
              icon: 'success'
            })
          }
        }
      })
    },

    // 页面跳转
    goToPage(url) {
      console.log('跳转到:', url)
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
      // uni.navigateTo({ url })
    }
  }
}
</script>

<style lang="scss" scoped>
.distribution-container {
  //min-height: 100vh;
  //background: linear-gradient(180deg, #4182bb 0%, #5a96d4 100%);
}

.scroll-content {
  height: calc(100vh - 29rpx);
  background-color: #f5f7fa;
}

.earnings-overview {
  background: linear-gradient(135deg, #4a90e2 0%, #5ba0f2 100%);
  padding: 40rpx 30rpx 60rpx;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40rpx;
    background-color: #f5f7fa;
    border-radius: 40rpx 40rpx 0 0;
  }
}

.earnings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 50rpx;
}

.earnings-main {
  flex: 1;
}

.earnings-label {
  display: block;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 15rpx;
}

.earnings-amount {
  display: block;
  font-size: 64rpx;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10rpx;
}

.earnings-note {
  display: block;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
}

.earnings-actions {
  display: flex;
  align-items: center;
}

.action-btn {
  padding: 20rpx 40rpx;
  border-radius: 50rpx;
  transition: all 0.3s ease;

  &.withdraw-btn {
    background-color: rgba(255, 255, 255, 0.2);
    border: 2rpx solid rgba(255, 255, 255, 0.3);

    &:active {
      background-color: rgba(255, 255, 255, 0.3);
      transform: scale(0.95);
    }
  }
}

.btn-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #fff;
}

.earnings-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  padding: 40rpx 20rpx;
  backdrop-filter: blur(10rpx);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stat-value {
  font-size: 32rpx;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.7);
}

.stat-divider {
  width: 2rpx;
  height: 60rpx;
  background-color: rgba(255, 255, 255, 0.2);
}

.bank-card-section {
  margin: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #303133;
}

.section-action {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.action-text {
  font-size: 26rpx;
  color: #4182bb;
}

.bank-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16rpx;
  color: #fff;
}

.card-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.bank-logo {
  width: 60rpx;
  height: 60rpx;
  border-radius: 10rpx;
  background-color: #fff;
  margin-right: 20rpx;
}

.card-details {
  display: flex;
  flex-direction: column;
}

.bank-name {
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.card-number {
  font-size: 24rpx;
  opacity: 0.8;
}

.card-status {
  display: flex;
  align-items: center;
}

.status-text {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

.no-bank-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 20rpx;
}

.no-card-icon {
  margin-bottom: 20rpx;

  image {
    width: 60rpx;
    height: 60rpx;
  }
}

.no-card-text {
  font-size: 28rpx;
  color: #303133;
  margin-bottom: 10rpx;
}

.no-card-desc {
  font-size: 24rpx;
  color: #909399;
}

.menu-section {
  margin: 0 30rpx 30rpx;
}

.menu-list {
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx;
  border-bottom: 2rpx solid #f5f7fa;
  transition: all 0.3s ease;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background-color: #f8f9fa;
  }
}

.menu-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.menu-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30rpx;

  &.withdraw-icon {
    background-color: rgba(16, 196, 105, 0.1);
  }

  &.earnings-icon {
    background-color: rgba(65, 130, 187, 0.1);
  }

  &.invite-icon {
    background-color: rgba(255, 107, 53, 0.1);
  }

  &.rule-icon {
    background-color: rgba(144, 147, 153, 0.1);
  }
}

.menu-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #303133;
}

.menu-right {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.menu-count {
  font-size: 24rpx;
  color: #909399;
  background-color: #f5f7fa;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  min-width: 40rpx;
  text-align: center;
}

.safe-area-bottom {
  height: calc(env(safe-area-inset-bottom) + 40rpx);
}
</style>
